<!--
@description ：浏览详情
-->

<template>
  <div>
    <div class="wrap g-card">
      <div class="header-btn">
        <div>浏览详情</div>
        <div>
          <el-button plain type="info" @click="cancel">返回</el-button>
        </div>
      </div>
    </div>
    <div class="wrap g-card">
      <el-date-picker
        v-model="selectTime"
        end-placeholder="结束日期"
        range-separator="至"
        start-placeholder="开始日期"
        style="width: 380px;margin: 16px"
        :clearable="false"
        @change="handleQuery"
        type="daterange"
      >
      </el-date-picker>
      <div style="margin: 20px">
        <el-table v-loading="loading" :data="tableList">
          <el-table-column align="center" label="姓名" prop="name" min-width="140"/>
          <el-table-column align="center" label="性别" prop="sexName" min-width="120"/>
          <el-table-column align="center" label="浏览时间" prop="browseTime" min-width="180"/>
          <el-table-column align="center" label="浏览时长(s)" prop="browseDuration" min-width="180"/>
        </el-table>
        <NormalPagination :currentPage="queryForm.pageNum" :page-size-list="pageSizeList" :pageSize="queryForm.pageSize"
                          :total="total" @handleCurrentChange="handleCurrentChange"
                          @handleSizeChange="handleSizeChange"
        ></NormalPagination>
      </div>
    </div>
  </div>
</template>
<script>
import * as api from '@/api/callingCard'
export default {
  name: 'callingCardDetail', //页面名称，必填
  props: {},
  components: {},
  data() {
    return {
      selectTime: [],

      loading: false,
      tableList: [],
      total: 0,
      pageSizeList: [10, 20, 30, 50],
      queryForm: {
        pageNum: 1,
        pageSize: 10
      }
    }
  },
  watch: {},
  methods: {
    cancel() {
      this.$router.go(-1)
    },
    handleCurrentChange(val) {
      this.queryForm.pageNum = val
      this.handleQuery()
    },
    handleSizeChange(val) {
      this.queryForm.pageNum = 1
      this.queryForm.pageSize = val
      this.handleQuery()
    },
    handleQuery(){
      let obj = {
        startTime: this.selectTime ? this.selectTime[0] : '',
        endTime: this.selectTime ? this.selectTime[1] : '',
        pageNum: this.queryForm.pageNum,
        pageSize: this.queryForm.pageSize
      }
      this.loading = true
      api.getTrack(obj).then((res) => {
        console.log('res')
        this.loading = false
        if(res.code == 200){
          this.tableList = res.rows
          this.total = res.total || 0
        }
      }).catch(() => {
        this.total = 0
      })
    }
  },
  mounted() {
    let currentDate = new Date();
    let nowDate = new Date()
    nowDate.setHours(23,59,59,59)
    let endDate = currentDate.toISOString().substring(0, 10)
    currentDate.setHours(0, 0, 0, 0); // 将时间设置为当天的凌晨
    currentDate.setDate(currentDate.getDate() - 6); // 将日期设置为需要的天数
    let startDate = currentDate.toISOString().substring(0, 10); // 将设置的天数作为开始日期
    let datesArray = [startDate, endDate]
    this.selectTime = datesArray
    this.$set(this, 'selectTime', datesArray)
    window.setTimeout(() => {
      this.handleQuery()
    }, 10)
  },
  created() {
  }
}

</script>

<style lang="scss" scoped>
@import "@/styles/base.scss";

.header-btn {
  @include headerBtn;
  margin-bottom: 0;
}
</style>
